import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'package:ball_lion/entity/home/subs_list_entity.dart';
import 'package:ball_lion/module/pick/items/avator_label.dart';
import 'package:ball_lion/module/pick/subs/subs_detail_logic.dart';
import 'package:ball_lion/resources/styles.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/utils/utils.dart';
import 'package:ball_lion/utils/widget_utils.dart';
import 'package:ball_lion/widgets/base/wqs_dialog.dart';
import 'package:ball_lion/widgets/card.dart';
import 'package:ball_lion/widgets/tip_widget.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';
import 'package:ball_lion/widgets/base/wqs_button.dart';

class SubsPayPage extends StatefulWidget {
  const SubsPayPage({super.key});

  @override
  State<SubsPayPage> createState() => _SubsPayPageState();
}

class _SubsPayPageState extends State<SubsPayPage> {
  final SubsDetailLogic logic = Get.put(SubsDetailLogic());
  @override
  Widget build(BuildContext context) {
    return GetBuilder<SubsDetailLogic>(builder: (logic) {
      return Container(
        color: Colours.greyF2F3F7,
        child: Stack(
          children: [
            Positioned(
                top: 0,
                child: Image.asset(
                    width: Get.width,
                    fit: BoxFit.fitWidth,
                    Utils.getImgPath("subscribe_background.png"))),
            Column(
              children: [
                Styles.appBar(
                    backgroundColor: Colours.transparent,
                    title: QsText("${logic.entity?.name ?? ""}专享服务"),
                    titleTextStyle: const TextStyle(
                        color: Colours.brown6A3313,
                        fontSize: 18,
                        fontWeight: FontWeight.w500)),
                Expanded(
                  child: SingleChildScrollView(
                    physics: const ClampingScrollPhysics(),
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 140),
                      child: Column(
                        children: [
                          Block(
                              cardStyle: const CardStyle(
                                  margin: EdgeInsets.fromLTRB(12, 20, 12, 0),
                                  padding: EdgeInsets.all(16)),
                              child: _expertInfo()),
                          Block(
                              cardStyle: const CardStyle(
                                  margin: EdgeInsets.fromLTRB(12, 10, 12, 0),
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 10, vertical: 12)),
                              child: _subscribeChoice()),
                          if (logic.tip != null)
                            Block(
                                cardStyle: const CardStyle(
                                    margin: EdgeInsets.fromLTRB(12, 10, 12, 0),
                                    padding:
                                        EdgeInsets.fromLTRB(12, 12, 12, 20)),
                                child: _notice())
                        ],
                      ),
                    ),
                  ),
                )
              ],
            ),
            Positioned(bottom: 0, left: 0, right: 0, child: _payBar())
          ],
        ),
      );
    });
  }

  Widget _expertInfo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        AvatarLabel.tag(
            avatarSize: 52,
            nameSize: 16,
            nameWeight: FontWeight.w500,
            avatarUrl: logic.entity?.logo,
            id: logic.entity?.expertId,
            name: logic.entity?.name,
            index: "dingyue",
            tagList: logic.entity?.tags?.split(",")),
        Container(height: 8),
        QsText(
          "简介：${logic.entity?.info ?? ""}",
          maxLines: 3,
          fontSize: 12,
          color: Colours.grey66,
        )
      ],
    );
  }

  Widget _subscribeChoice() {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      const QsText("专家订阅套餐",
              fontSize: 16,
              fontWeight: FontWeight.w500,
              color: Colours.brown6A3313)
          .center,
      Container(height: 20),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children:
            List<Widget>.generate(3, (index) => Expanded(child: _price(index)))
                .insertWith(1, [Container(width: 7)]).insertWith(
                    3, [Container(width: 7)]),
      )
    ]);
  }

  Widget _notice() {
    return Column(
      children: [
        const QsText("订阅须知",
            fontSize: 16,
            fontWeight: FontWeight.w500,
            color: Colours.brown6A3313),
        Container(height: 16),
        //需要确定接口返回类型
        const TipWidget(
            type: "subs_detail",
            fontSize: 14,
            lineHeight: 1.6,
            textColor: Colours.grey66)
      ],
    );
  }

  Widget _payBar() {
    SubsPrices? price = logic.entity?.subsPrices?[logic.priceIndex];
    return Column(
      children: [
        Container(
          decoration: const BoxDecoration(
              color: Colors.white,
              border:
                  Border(top: BorderSide(color: Colours.greyEE, width: 0.5))),
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
          child: Row(
            children: [
              QsText(
                  price?.needPrices == "0球币"
                      ? "限时免费"
                      : '${price?.needPrices ?? ""}球币',
                  fontSize: 16,
                  color: Colours.brown6A3313,
                  fontWeight: FontWeight.w500),
              Container(width: 4),
              if (price?.needPrices != price?.prices && price?.prices != null)
                QsText('${price?.prices ?? ""}球币',
                    fontSize: 12,
                    decoration: TextDecoration.lineThrough,
                    color: Colours.grey99),
              const Spacer(),
              QsButton(
                width: 108,
                height: 40,
                onPressed: () {
                  if (logic.entity?.isExistSubs == true) {
                    Get.dialog(const QsDialog.single("你还有未使用的订阅次数，全部使用后方可续订",
                        confirmText: "知道了"));
                    return;
                  }

                  Utils.onEvent('expert_subscribe_pay',
                      params: {"expert_id": logic.entity?.expertId});
                  if (price?.needPrices != null) {
                    logic.toPay(price!.needPrices!, price.type ?? 0);
                  }
                },
                borderRadius: 20,
                backgroundColor: Colours.goldF8D486,
                foregroundColor: Colours.brown6A3313,
                text: "立即支付",
                textStyle:
                    const TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
              )
            ],
          ),
        ),
        Container(
            color: Colours.white, height: MediaQuery.of(context).padding.bottom)
      ],
    );
  }

  Widget _benefit(int index) {
    return Column(
      children: [
        ClipOval(
            child: Image.asset(
                width: 40, Utils.getImgPath(logic.benefitIcons[index]))),
        QsText(logic.benefitNames[index],
                fontWeight: FontWeight.w600, textAlign: TextAlign.center)
            .paddingOnly(top: 4, bottom: 2),
        QsText(logic.benefits[index].changeUnit,
            fontSize: 12, color: Colours.grey99, textAlign: TextAlign.center)
      ],
    );
  }

  Widget _price(int index) {
    var price = logic.entity?.subsPrices?[index];
    var align = Alignment.center;
    if (index == 0) align = Alignment.centerLeft;
    if (index == 2) align = Alignment.centerRight;

    return GestureDetector(
      onTap: () => logic.priceIndex = index,
      child: Container(
        alignment: align,
        height: 128,
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
            color:
                logic.priceIndex == index ? Colours.goldFBE7BA : Colours.white,
            border: logic.priceIndex != index
                ? Border.all(
                    color: Colours.greyEE,
                    width: 0.5,
                    strokeAlign: BorderSide.strokeAlignOutside)
                : null,
            borderRadius: BorderRadius.circular(10)),
        child: Column(
          children: [
            Container(
                width: Get.width,
                height: 28,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: logic.priceIndex == index
                        ? Colours.goldF8D486
                        : Colours.goldFFFBF2,
                    border: logic.priceIndex != index
                        ? const Border(
                            bottom:
                                BorderSide(color: Colours.greyEE, width: 0.5))
                        : null),
                child: QsText(price?.timeDay ?? "")),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(height: 10),
                  Text.rich(TextSpan(
                      style: const TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: 20,
                          color: Colours.brown6A3313),
                      children: [
                        TextSpan(
                            text: price?.needPrices?.split("球币").join() ?? ""),
                        TextSpan(
                            text: "球币".changeUnit,
                            style: const TextStyle(fontSize: 12))
                      ])),
                  if (price?.min.hasValue == true)
                    Container(
                      margin: const EdgeInsets.only(top: 8),
                      padding: const EdgeInsets.symmetric(
                          horizontal: 6, vertical: 2),
                      decoration: BoxDecoration(
                          color: price?.min.noValue == true
                              ? Colours.transparent
                              : Colours.goldFFF4DB,
                          borderRadius: BorderRadius.circular(10)),
                      child: Text.rich(TextSpan(
                          style: const TextStyle(
                              fontSize: 12, color: Colours.grey66),
                          children: [
                            const TextSpan(
                                text: "原价: ", style: TextStyle(fontSize: 10)),
                            TextSpan(
                                text: '${price?.prices ?? ""}球币',
                                style: const TextStyle(
                                    fontSize: 10,
                                    decoration: TextDecoration.lineThrough))
                          ])),
                    ),
                  Container(
                      margin: const EdgeInsets.only(top: 4),
                      child: QsText('${price?.readNum ?? "0"}篇',
                          needCenter: true,
                          fontSize: 10,
                          color: Colours.grey66)),
                  Container(
                      margin: const EdgeInsets.only(top: 4),
                      child: QsText(price?.desc,
                          needCenter: true,
                          fontSize: 10,
                          color: Colours.grey66)),
                  Flexible(child: Container(height: 36))
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
